<template>
	<view class="mobile-item-container">
    <Navbar :title="id != undefined ? '修改文章' : '新增文章'" bgColor="#fff" :h5Show="true"></Navbar>
		<u--form :rules="rules"
						labelPosition="left"
						:model="form"
						ref="uForm"
				>
					<u-form-item
							label="标题"
							prop="title"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="form.title"
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
							label="来源"
							prop="comeForm"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="form.comeForm"
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
							label="状态"
							prop="state"
							borderBottom
							ref="item1"
					>
						<u-radio-group
						    v-model="form.state"
							placement="row"
						  >
						    <u-radio
						      :customStyle="{marginBottom: '8px',marginLeft: '5%'}"
						      v-for="(item, index) in actions"
						      :key="index"
						      :label="item.name"
						      :name="item.value"
						    >
						    </u-radio>
						  </u-radio-group>
					</u-form-item>
					
					<u-form-item v-if="isPic">
						<u-upload
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								multiple
								:maxCount="10"
							></u-upload>
					</u-form-item>
					
					<u-form-item v-else
							prop="content"
					>
						<view class="editor">
						      <sp-editor
						        :toolbar-config="toolbarConfig"
						        @input="inputOver"
						        @upinImage="upinImage"
						        @init="initEditor"
						        @overMax="overMax"
						        @exportHtml="exportHtml"
						        @addLink="addLink"
						      ></sp-editor>
						    </view> 
						
					</u-form-item>
				</u--form>
			<u-row :gutter="20" style="margin-top: 36px;">
					  <u-col :span="6">
						<u-button type="success" @click="submit">提交</u-button>
					  </u-col>
					  <u-col :span="6">
						<u-button icon="arrow-left" text="返回" plain @click="goBack()"></u-button>
					  </u-col>
			</u-row>
	</view>
</template>

<script>
	import * as detailApi from '@/api/business/detail'
	
	import Navbar from '@/components/navbar/Navbar'
	
	const { environment } = require('@/config/environment.js')
	import { ACCESS_TOKEN } from '@/store/mutation-types'
	import storage from '@/utils/storage';
	
	export default {
    components:{Navbar},
		data() {
			return {
				editorIns: null,
				readOnly: false,
				toolbarConfig: {
				  excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck','export'],
				  iconSize: '20px',
				  iconColumns: 10
				},
				mediaQueryOb: null ,// 响应式媒体查询      
					  
				id: undefined,
				infinityContent: undefined,
				form: {
					id: undefined,
					content: undefined,
					columnId: undefined,
					title: undefined,
					picPath: undefined,
					picContent: undefined,
					comeForm: undefined,
					state: 'N'
				},
				rules: {
				  title: [ { required: true, message: '请输入标题', trigger: ['blur', 'change'] } ]
				},
				isPic: false,
				actions: [
					{ 
						name: '草稿',
						value: 'N'
					},
					{
						name: '发布',
						value: 'Y'
					}		
				],
				fileList: [],
				picList: []
			}
		},
		mounted() {
		    this.testMediaQueryObserver()
		},
		destroyed() {
			this.mediaQueryOb.disconnect() //组件销毁时停止媒体查询监听
			this.mediaQueryOb = null
		},
		onLoad(params) {
			this.form.columnId = params.columnId
			this.id = params.id
			if(params.isPic == 'Y'){
				this.isPic = true
			}
			if(params.id != undefined){
				this.loadData ()
			}else{
				this.getInfo ()
			}
		},
		methods: {
			getInfo () {
			  const app = this
			  app.$store.dispatch('Info').then(res => {
			    app.form.comeForm = res.nickName
			  })
			},
			submit(){
				if(this.isPic){
					this.form.picContent = this.picList.toString()
				}
				
				this.$refs.uForm.validate().then(res1 => {
					
				  if (this.id != undefined) {
				    detailApi.detailModify(this.form).then(res => {
						uni.showToast({ title: res.msg })
				    	this.goBack ()
				    })
				  } else {
				    detailApi.detailAdd(this.form).then(res => {
				    	uni.showToast({ title: res.msg })
				    	this.goBack ()
				    })
				  }
				});
			},
			getHtml(e){
				this.form.content = e
			},
			loadData () {
			  const app = this
			  detailApi.detailById(this.id).then(res => {
			    app.form = res.data
				if(res.data != null){
					this.title = res.data.columnName
					if(this.isPic){
						if(this.form.picContent != null && this.form.picContent != '' && this.form.picContent.length > 0){
							let ls = this.form.picContent.split(',')
							for (let i=0,len=ls.length;i<len;i++) {
								let m = {
									name: i + '.jpg',
									url: ls[i]
								}
								this.fileList.push(m)
							}
						}
					}else{
						this.preRender()
					}
				}
				
			  })
			},
			goBack () {
				uni.navigateBack({
				    delta: 1, // 返回层数，2则上上页
				    success() {
				        uni.$emit('update',{msg:'页面更新'})
				    }
				})		
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.$delete(this.picList, event.index)
			},			
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},			
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: environment.baseURL + "/common/uploads", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'files',
						formData: {},
						header: {
						  "Authorization": "Bearer " + storage.get(ACCESS_TOKEN)
						},
						success: (res) => {
							const that = this
							let data = JSON.parse(res.data)
							setTimeout(() => {
								resolve(data.urls)
								that.picList.push(data.fileNames)
							}, 1000)
						}
					});
				})
			},
						
						
		
			 testMediaQueryObserver() {
			      this.mediaQueryOb = uni.createMediaQueryObserver(this)
			      this.mediaQueryOb.observe(
			        {
			          minWidth: 0, //页面最小宽度 0px
			          maxWidth: 1000 //页面宽度最大 500px
			        },
			        (matches) => {
			          console.log('==== 开启媒体查询 :', matches)
			          if (matches) {
			            // 页面宽度在0-500px时
			            this.toolbarConfig.iconColumns = 12
			          } else {
			            this.toolbarConfig.iconColumns = 16
			          }
			        }
			      )
			    },
			    /**
			     * 获取输入内容
			     * @param {Object} e {html,text} 内容的html文本，和text文本
			     */
			    inputOver(e) {
			      console.log('==== inputOver :', e)
				  this.form.content = e.html
			    },
			    /**
			     * 超出最大内容限制
			     * @param {Object} e {html,text} 内容的html文本，和text文本
			     */
			    overMax(e) {
			      console.log('==== overMax :', e)
			    },
			    /**
			     * 编辑器就绪
			     * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
			     * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
			     * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
			     */
			    initEditor(editor) {
			      this.editorIns = editor // 保存编辑器实例
			    },
			    preRender() {
			      // 初始化编辑器内容
			      const that = this;
				  console.log(that.form.content)
				  setTimeout(() => {
					  that.editorIns.setContents({
						  html: that.form.content
						}
						)
					}, 100)
			     // setTimeout(() => {
			        /**
			         * 光标默认在第一个，所以默认会在最前面插入内容
			         * 注意：
			         * 由于官方editor组件在不同平台是基于各平台对应的富文本技术实现
			         * 因此insertText方法可能存在在安卓app正常，但是其他平台在插入内容的时候会移动光标聚焦
			         * 导致焦点回滚到视口处的问题，因此尽量避免初始化的时候使用insertText插入内容
			         * 可使用setContents初始化内容代替，但是要注意的时，setContents会将所有内容整体初始化，而不是插入内容
			         */
			        //this.editorIns.insertText({ text: 'Hello！' })
					
			      //}, 1000)
			    },
			    /**
			     * 直接运行示例工程插入图片无法正常显示的看这里
			     * 因为插件默认采用云端存储图片的方式
			     * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
			     * @param {Object} tempFiles
			     * @param {Object} editorCtx
			     */
			    upinImage(tempFiles, editorCtx) {
			      /**
			       * 本地临时插入图片预览
			       * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
			       * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
			       * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
			       */
			      /* // #ifdef MP-WEIXIN
			      // 注意微信小程序的图片路径是在tempFilePath字段中
			      editorCtx.insertImage({
			        src: tempFiles[0].tempFilePath,
			        width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
			        success: function () {}
			      })
			      // #endif */
			
			     /* // #ifdef APP-PLUS || H5
			      editorCtx.insertImage({
			        src: tempFiles[0].path,
			        width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
			        success: function () {}
			      })
			      // #endif */
			
			      /**
			       * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
			       * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
			       */
				  let a = uni.uploadFile({
				  	url: environment.baseURL + "/common/uploads", // 仅为示例，非真实的接口地址
				  	filePath: tempFiles[0].path,
				  	name: 'files',
				  	formData: {},
				  	header: {
				  	  "Authorization": "Bearer " + storage.get(ACCESS_TOKEN)
				  	},
				  	success: (res) => {
						console.log(res)
				  		let data = JSON.parse(res.data);
				  		editorCtx.insertImage({
				  			src: data.urls,
				  			alt: '图像',
				  			success: function() {
				  				console.log('insert image success')
				  			}
				  		})
				  	}
				  });
			      // tempFiles.forEach(async (item) => {
			      //   uni.showLoading({
			      //     title: '上传中请稍后',
			      //     mask: true
			      //   })
			      //   let upfile = await uniCloud.uploadFile({
			      //     filePath: item.path,
			      //     // 同名会导致报错 policy_does_not_allow_file_overwrite
			      //     // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
			      //     cloudPath: `cloudstorage/${item.name}`,
			      //     cloudPathAsRealPath: true
			      //   })
			      //   editorCtx.insertImage({
			      //     src: upfile.fileID,
			      //     width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
			      //     success: function () {
			      //       uni.hideLoading()
			      //     }
			      //   })
			      // })
			    },
			    /**
			     * 导出
			     * @param {string} e 导出的html内容
			     */
			    exportHtml(e) {
			      uni.navigateTo({
			        url: '/pages/out/out',
			        success(res) {
			          res.eventChannel.emit('e-transmit-html', {
			            data: e
			          })
			        }
			      })
			    },
			    /**
			     * 添加超链接
			     * @param {Object} e { text: '链接描述', href: '链接地址' }
			     */
			    addLink(e) {
			      console.log('==== addLink :', e)
			    }
		}
	}
</script>

<style>
	
	.editor {
	  height: 460px;
	  width: 100%;
	  position: sticky;
	  top: var(--window-top);
	  background-color: #ffffff;
	  border: 1px solid #000;
	}
</style>
